<!DOCTYPE html>
<html>
<head>
  <title>Books Store</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>

  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  <%= javascript_importmap_tags %>
</head>

<body>
<header class="bg-green-700">
  <%= image_tag 'logo.svg', alt: 'The Pragmatic Bookshelf' %>
  <h1><%= @page_title %></h1>
</header>
<section class="flex">
  <nav class="bg-green-900 p-6">
    <%= render partial: 'layouts/cart', locals: { cart: @cart } %>
    <ul class="text-gray-300 leading-8">
      <li><a href="/">Home</a></li>
      <li><a href="/questions">Questions</a></li>
      <li><a href="/news">News</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>

  <main class="container mx-auto mt-4 px-5 flex">
    <%= yield %>
  </main>
</section>
</body>
</html>
